<!--
 * @Description: 
 * @Author: Dxcr
 * @Date: 2023-05-18 15:53:22
 * @LastEditTime: 2024-09-12 10:48:23
 * @LastEditors: Dxcr
-->
<template>
	<div class="EmergencyPopup_container" >
		<div style="padding:10px" v-if="info.type==='yjh'">
			<el-tab-pane label="应急专家" name="first" class="tab-pane"  :class="bgClass('first')" @click="tabclick('first')" v-if="info.data.professorList.length !==0 ">应急专家</el-tab-pane> &nbsp;&nbsp;
			<el-tab-pane label="应急队伍" name="second" class="tab-pane" :class="bgClass('second')" @click="tabclick('second')" v-if="info.data.teamVOS.length !==0">应急队伍</el-tab-pane>&nbsp;&nbsp;
			<el-tab-pane label="应急物资" name="third" class="tab-pane"  :class="bgClass('third')" @click="tabclick('third')" v-if="info.data.suppliesVOS.length !==0">应急物资</el-tab-pane>&nbsp;&nbsp;
		</div>
		<div class="panediv" v-if="info.type!=='yjh'" style="margin-top: 20px;">
			<div v-if="info.type==='zj'">
				<div class="row" v-for="(item, index) in info.data" :key="index">
					<div>
						<div class="rowcol"><h7>姓名</h7>：{{item.name}}</div>
						<div class="rowco2"><h7>工作电话</h7>：{{item.phoneNumber}}</div>
						<div class="rowco1"><h7>专业</h7>：{{item.major}}</div>
						<div class="rowco1"><h7>性别</h7>：{{item.sexDesc}}</div>
					</div>
					<div class="rowco1"><h7>办公地址</h7>：{{item.deptIdDesc}}</div>
					<div class="rowco2"><h7>年龄</h7>：{{item.age}}</div>
				</div>
			</div>
			<div v-else="info.type==='dw'">
				<div class="row" v-for="(item, index) in info.data" :key="index">
					<div class="rowcol"><h7>所属单位</h7>：{{item.teamName}}</div>
					<div class="rowco2"><h7>队伍名称</h7>：{{item.teamPropertyDesc}}</div>
					<div class="rowcol"><h7>队伍性质</h7>：{{item.teamPropertyDesc}}</div>
					<div class="rowco2"><h7>常驻地址</h7>：{{item.permanentAddress}}</div>
					<div class="rowcol"><h7>总人数</h7>：{{item.headcount}}</div>
					<div class="rowco2"><h7>负责人</h7>：{{item.principal}}</div>
					<div class="rowcol"><h7>联系电话</h7>：{{item.phone}}</div>
					<div class="rowco2"><h7>擅长处理事故类型</h7>：{{item.accidentType}}</div>
				</div>
			</div>
			<div  v-else="info.type==='wz'">
				<div class="row" v-for="(item, index) in info.data" :key="index">
					<div class="rowcol"><h7>所属单位</h7>：{{item.deptIdDesc}}</div>
					<div class="rowco2"><h7>类型</h7>：{{item.typeDesc}}</div>
					<div class="rowcol"><h7>物资名称</h7>：{{item.name}}</div>
					<div class="rowco2"><h7>规格型号</h7>：{{item.model}}</div>
					<div class="rowcol"><h7>数量</h7>：{{item.number}}</div>
					<div class="rowco2"><h7>存放场所</h7>：{{item.storagePlaces}}</div>
					<div class="rowcol"><h7>负责人</h7>：{{item.phone}}</div>
					<div class="rowco2"><h7>联系电话</h7>：{{item.principal}}</div>
				</div>
			</div>
		</div>
		<div class="panediv" v-if="info.type==='yjh'">
			<div v-if="activeName=='first'">
				<div class="row" v-for="(item, index) in info.data.professorList" :key="index">
					<div>
						<div class="rowcol"><h7>姓名</h7>：{{item.name}}</div>
						<div class="rowco2"><h7>工作电话</h7>：{{item.phoneNumber}}</div>
						<div class="rowco1"><h7>专业</h7>：{{item.major}}</div>
						<div class="rowco1"><h7>性别</h7>：{{item.sexDesc}}</div>
					</div>
					<div class="rowco1"><h7>办公地址</h7>：{{item.deptIdDesc}}</div>
					<div class="rowco2"><h7>年龄</h7>：{{item.age}}</div>
				</div>
			</div>
			<div v-if="activeName=='second'">
				<div class="row" v-for="(item, index) in info.data.teamVOS" :key="index">
					<div class="rowcol"><h7>所属单位</h7>：{{item.teamName}}</div>
					<div class="rowco2"><h7>队伍名称</h7>：{{item.teamPropertyDesc}}</div>
					<div class="rowcol"><h7>队伍性质</h7>：{{item.teamPropertyDesc}}</div>
					<div class="rowco2"><h7>常驻地址</h7>：{{item.permanentAddress}}</div>
					<div class="rowcol"><h7>总人数</h7>：{{item.headcount}}</div>
					<div class="rowco2"><h7>负责人</h7>：{{item.principal}}</div>
					<div class="rowcol"><h7>联系电话</h7>：{{item.phone}}</div>
					<div class="rowco2"><h7>擅长处理事故类型</h7>：{{item.accidentType}}</div>
				</div>
			</div>
			<div v-if="activeName=='third'">
				<div class="row" v-for="(item, index) in info.data.suppliesVOS" :key="index">
					<div class="rowcol"><h7>所属单位</h7>：{{item.deptIdDesc}}</div>
					<div class="rowco2"><h7>类型</h7>：{{item.typeDesc}}</div>
					<div class="rowcol"><h7>物资名称</h7>：{{item.name}}</div>
					<div class="rowco2"><h7>规格型号</h7>：{{item.model}}</div>
					<div class="rowcol"><h7>数量</h7>：{{item.number}}</div>
					<div class="rowco2"><h7>存放场所</h7>：{{item.storagePlaces}}</div>
					<div class="rowcol"><h7>负责人</h7>：{{item.phone}}</div>
					<div class="rowco2"><h7>联系电话</h7>：{{item.principal}}</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup>
import {
  defineComponent,
  ref,
  reactive,
  computed,
  toRefs,
  watch,
  onMounted,
} from "vue";
import { useRouter, useRoute } from "vue-router";
import Router from "@/router";
const props = defineProps({
  info: {
    type: Object,
    default: {},
  },
});

const getRoute = useRoute();
const router = useRouter();
const data = reactive({
	bgClass:''
});
const activeName = ref('first');

const getTableData = function(){
	tableData.value = props.info.data
}

function bgClass(e){
	if(e == activeName.value){
		return 'clorss1';
	}else{
		return 'clorss2';
	}
}

function tabclick(e) {
	activeName.value = e
}

onMounted(() => {
	if(props.info.type==='yjh'){
		if(props.info.data.professorList.length !==0){activeName.value = 'first'}
		else if(props.info.data.teamVOS.length !==0){activeName.value = 'second'}
		else if(props.info.data.suppliesVOS.length !==0){activeName.value = 'third'}
	}
});
</script>
<style lang="scss" scoped>
.EmergencyPopup_container {
  width: 600px;
  height: 260px;
  background: radial-gradient(107% 48% at 51% 46%, #008BF0 0%, #002863 100%);box-shadow: 0px 0px 10px 0px rgba(0, 255, 247, 0.1);
  background-size: 100% 100%;
  border-radius: 3%;
}
.tab-pane{
	cursor: pointer;
}
.clorss1{
	color: #25dbfc;
}
.clorss2{
	color: #fff;
}
.panediv{
	padding: 10px;
	
	height: 220px;
	overflow: hidden;
	overflow-y: scroll;
	.row{
		width: 100%;
		border-bottom:1px dashed #fff ;
		padding: 10px;
		display: flow-root;
	}
	.rowcol{
		width: 70%;
		float: left;
	}
	.rowco2{
		width: 30%;
		float: left;
	}
}
</style>
